<template>
	<view class="container">
		<view class="header">
			<text class="title">我的帖子</text>
			<text class="count">共{{ posts.length }}个帖子</text>
		</view>
		
		<view class="posts-list">
			<view class="post-item" v-for="post in posts" :key="post.id" @click="navigateToPost(post.id)">
				<view class="post-header">
					<view class="post-info">
						<text class="post-title">{{ post.title }}</text>
						<view class="post-meta">
							<text class="post-time">{{ post.createTime }}</text>
							<text class="post-game">{{ post.gameName }}</text>
						</view>
					</view>
					<view class="post-actions">
						<text class="delete-btn" @click.stop="deletePost(post.id)">删除</text>
						<text class="edit-btn" @click.stop="editPost(post.id)">编辑</text>
					</view>
				</view>
				
				<text class="post-content" v-if="post.content">{{ post.content }}</text>
				
				<view class="post-images" v-if="post.images && post.images.length">
					<image v-for="(img, index) in post.images" 
						:key="index" 
						:src="img" 
						class="post-image"
						mode="aspectFill"
						@click.stop="previewImage(post.images, index)" />
				</view>
				
				<view class="post-stats">
					<view class="stat-item">
						<text class="iconfont icon-like"></text>
						<text class="stat-num">{{ post.likes }}</text>
					</view>
					<view class="stat-item">
						<text class="iconfont icon-comment"></text>
						<text class="stat-num">{{ post.comments }}</text>
					</view>
					<view class="stat-item">
						<text class="iconfont icon-share"></text>
						<text class="stat-num">{{ post.shares }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="empty-state" v-if="posts.length === 0">
			<image src="/static/empty-posts.png" mode="aspectFit" class="empty-image" />
			<text class="empty-text">还没有发布任何帖子哦</text>
			<view class="create-btn" @click="createPost">发布新帖子</view>
		</view>
	</view>
</template>

<script>
import { games } from '../../../utils/gameData.js';

export default {
	data() {
		return {
			posts: []
		}
	},
	created() {
		this.generateMockData();
	},
	methods: {
		generateMockData() {
			// 生成5条模拟帖子数据
			this.posts = Array(5).fill().map((_, index) => {
				const game = games[Math.floor(Math.random() * games.length)];
				return {
					id: `post_${index}`,
					title: this.getRandomTitle(),
					content: this.getRandomContent(),
					images: this.getRandomImages(),
					createTime: this.getRandomDate(),
					gameName: game.game_name,
					likes: Math.floor(Math.random() * 100),
					comments: Math.floor(Math.random() * 50),
					shares: Math.floor(Math.random() * 20)
				};
			});
		},
		getRandomTitle() {
			const titles = [
				'分享一个游戏技巧',
				'这个游戏太好玩了',
				'求助：卡在这个关卡过不去',
				'发现一个隐藏彩蛋',
				'新手攻略分享'
			];
			return titles[Math.floor(Math.random() * titles.length)];
		},
		getRandomContent() {
			const contents = [
				'最近发现了一个很有意思的玩法，和大家分享一下...',
				'这个游戏的画面真的很精美，音乐也很棒...',
				'有没有大佬知道这个boss怎么打？求指导！',
				'偶然发现了一个隐藏关卡，通关后有特殊奖励...',
				'整理了一下新手常见问题，希望对大家有帮助...'
			];
			return contents[Math.floor(Math.random() * contents.length)];
		},
		getRandomImages() {
			// 随机返回0-3张图片
			const count = Math.floor(Math.random() * 4);
			if (count === 0) return [];
			return Array(count).fill().map(() => {
				const randomGame = games[Math.floor(Math.random() * games.length)];
				return randomGame.game_logo;
			});
		},
		getRandomDate() {
			const start = new Date(2024, 0, 1);
			const end = new Date();
			const date = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
			return `${date.getMonth() + 1}月${date.getDate()}日`;
		},
		navigateToPost(postId) {
			uni.showToast({
				title: '查看帖子详情',
				icon: 'none'
			});
		},
		deletePost(postId) {
			uni.showModal({
				title: '删除帖子',
				content: '确定要删除这条帖子吗？',
				success: (res) => {
					if (res.confirm) {
						this.posts = this.posts.filter(post => post.id !== postId);
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
					}
				}
			});
		},
		editPost(postId) {
			uni.showToast({
				title: '编辑帖子',
				icon: 'none'
			});
		},
		createPost() {
			uni.showToast({
				title: '发布新帖子',
				icon: 'none'
			});
		},
		previewImage(images, current) {
			uni.previewImage({
				urls: images,
				current: current
			});
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #1E1E2E;
	padding: 12px;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	background: #2D2D44;
	border-radius: 6px;
	margin-bottom: 15px;
}

.title {
	font-size: 18px;
	color: #9796B8;
	font-weight: bold;
}

.count {
	font-size: 14px;
	color: #6E6C89;
}

.post-item {
	background: #2D2D44;
	border-radius: 6px;
	padding: 15px;
	margin-bottom: 12px;
}

.post-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.post-info {
	flex: 1;
}

.post-title {
	font-size: 16px;
	color: #9796B8;
	margin-bottom: 6px;
}

.post-meta {
	display: flex;
	gap: 10px;
	font-size: 12px;
	color: #6E6C89;
}

.post-actions {
	display: flex;
	gap: 12px;
}

.delete-btn, .edit-btn {
	font-size: 12px;
	color: #6E6C89;
	padding: 2px 8px;
	border-radius: 4px;
	background: rgba(110, 108, 137, 0.1);
}

.post-content {
	font-size: 14px;
	color: #9796B8;
	line-height: 1.5;
	margin: 10px 0;
}

.post-images {
	display: flex;
	gap: 8px;
	margin: 10px 0;
	flex-wrap: wrap;
}

.post-image {
	width: 100px;
	height: 100px;
	border-radius: 4px;
}

.post-stats {
	display: flex;
	gap: 20px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(110, 108, 137, 0.1);
}

.stat-item {
	display: flex;
	align-items: center;
	gap: 4px;
	color: #6E6C89;
	font-size: 14px;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 50px 0;
}

.empty-image {
	width: 150px;
	height: 150px;
	margin-bottom: 15px;
}

.empty-text {
	color: #6E6C89;
	font-size: 14px;
	margin-bottom: 20px;
}

.create-btn {
	background: #9796B8;
	color: #1E1E2E;
	padding: 8px 20px;
	border-radius: 20px;
	font-size: 14px;
}

.iconfont {
	font-size: 16px;
}
</style> 